import React, {PureComponent} from 'react'
import {InputType} from './InputType'
import {FormGroupLabel} from '../FormGroupLabel'
import Icon from '../../icon/Icon'
import {mdiMagnify, mdiClose} from '@mdi/js'
import {COLORS} from '../../color'
import ButtonIcon from '../../icon/ButtonIcon'

interface Props {
  name: string
  type: InputType
  label?: string
  value: any
  isRequired: boolean
  valid?: boolean
  invalid?: boolean
  disabled?: boolean
  feedback?: string
  onChange: (value: any) => void
  className?: string
  placeholder?: string
  min?: number | string
  max?: number | string
  step?: number
  autoFocus?: boolean
  autoComplete?: string
  inputClassName?: string
  onFocus?: () => void
  onBlur?: () => void
  size?: 'sm' | 'lg'
  helpText?: React.ReactNode
  onKeyDown?: (e: any) => void
  id?: string
  isSearchInput?: boolean
  onClearValue?: () => void
}

class InputVertical extends PureComponent<Props> {
  render() {
    let {
      name,
      type,
      label,
      isRequired,
      value,
      valid,
      invalid,
      disabled,
      feedback,
      onChange,
      className,
      placeholder,
      min,
      max,
      step,
      autoFocus,
      autoComplete,
      inputClassName,
      onFocus,
      onBlur,
      helpText,
      onKeyDown,
      id,
      size,
      isSearchInput,
      onClearValue,
    } = this.props

    return (
      <FormGroupLabel
        feedback={feedback}
        label={label}
        helpText={helpText}
        valid={valid}
        invalid={invalid}
        isRequired={isRequired}
        className={className}>
        <div className={'input-for-search w-100'}>
          <input
            id={id}
            name={name}
            type={type}
            value={value ?? ''}
            required={isRequired ? isRequired : false}
            disabled={disabled}
            placeholder={placeholder}
            min={min}
            max={max}
            step={step}
            autoFocus={autoFocus}
            autoComplete={autoComplete ? autoComplete : 'off'}
            onFocus={onFocus}
            onBlur={onBlur}
            onKeyDown={onKeyDown}
            className={
              'input ' +
              (size ? size : 'lg') +
              (valid ? ' valid ' : '') +
              (invalid ? ' invalid ' : '') +
              (isSearchInput && size === 'sm' ? ' pr-x8 ' : '') +
              (isSearchInput && size === 'lg' ? ' pr-x10 ' : '') +
              (inputClassName ? inputClassName : '')
            }
            onChange={(evt) => {
              onChange(evt.target.value)
            }}
          />
          {isSearchInput && (
            <>
              {value === null || value === '' ? (
                <Icon
                  path={mdiMagnify}
                  color={COLORS.gray600}
                  size={size === 'sm' ? 0.7 : 1}
                  className={'search-icon-position'}
                />
              ) : (
                <ButtonIcon
                  iconPath={mdiClose}
                  color={COLORS.gray600}
                  size={size === 'sm' ? 'sm' : 'md'}
                  title={'Очистить'}
                  className={'search-icon-position'}
                  onClick={onClearValue}
                />
              )}
            </>
          )}
        </div>
      </FormGroupLabel>
    )
  }
}

export default InputVertical
